<template>
  <div class="container">
    <el-button class="delete-btn"
               type="danger"
               @click="clearHandle"
               :disabled="loading">清空历史记录</el-button>
    <div class="cards"
         v-loading="loading">
      <history-card v-for='(item,index) in histories'
                    :key='index'
                    :history='item'></history-card>
    </div>
  </div>
</template>

<script>
import HistoryCard from './components/HistoryCard'
import { mapGetters } from 'vuex'
import { getCodes, clearCodes } from '@/api/code'
export default {
  name: 'history',
  data () {
    return {
      loading: true,
      histories: []
    }
  },
  computed: {
    ...mapGetters(['userid'])
  },
  components: {
    HistoryCard
  },
  created () {
    getCodes(this.userid)
      .then((res) => {
        this.histories = res.data
        this.loading = false
      })
  },
  methods: {
    clearHandle () {
      this.$confirm('清空操作不可逆，是否继续？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clearCodes(this.userid)
          .then((res) => {
            this.histories = []
            this.$notify.success({
              title: '成功',
              message: res.data,
              position: 'bottom-right'
            })
          })
          .catch((err) => {
            this.$notify.error({
              title: '错误',
              message: err,
              position: 'bottom-right'
            })
          })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'

.container
  display flex
  flex-direction column
  width 60vw
  margin 0 auto
  .delete-btn
    margin-top 20px
    align-self flex-end
  .cards
    display flex
    flex-direction column
    align-items center
    min-height 500px
    border-radius 6px
    margin-bottom 50px
    &>div
      margin-top 20px
.empty
  margin-top 100px
  font-size 36px
  text-align center
</style>
